<template>
    <div class="user">
        <el-card class="box-card" v-if="cardSta == 'index'">
            <el-row style="margin-bottom: 20px;">
                <el-input placeholder="请输入主题名称" v-model="cardform.title" clearable style="width:200px"
                    size="mini"></el-input>
                <el-select v-model="cardform.type" placeholder="请选择类型" clearable :style="{ width: '150px' }"
                    size="mini">
                    <el-option v-for="item in typeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-button type="primary" size="mini" @click="sousuo">搜索
                </el-button>
                <el-button type="info" size="mini" @click="reset">重置
                </el-button>
                <el-button type="primary" @click="addcard" size="mini">添加
                </el-button>
            </el-row>
            <template>
                <el-table :data="cardtableData" style="width: 100%;margin:10px auto"
                    :header-cell-style="{ color: '#333' }">
                    <el-table-column prop="id" label="ID" key="1">
                    </el-table-column>
                    <el-table-column prop="image" label="主题卡片" key="1">
                        <template slot-scope="scope">
                            <div style="width: 120px;height: 70px;">
                                <img :src="scope.row.image" style="width: 100%;height: 100%;" alt="主题卡片">
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="主题名称" key="2">
                    </el-table-column>
                    <el-table-column label="类型" key="3">
                        <template slot-scope="scope">
                            <span>{{ scope.row.type == 1 ? '无限池' : '擂台赏' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center" key="4">
                        <template slot-scope="scope">
                            <el-switch @change="changeStatus(scope.row)" v-model="scope.row.status"
                                active-color="#13ce66" inactive-color="#ff4949" :active-value="activeValue"
                                :inactive-value="inactiveValue">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="创建时间" key="5">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="300" key="6">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="prizeList(scope.row.id)">查看
                            </el-button>
                            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑
                            </el-button>
                            <el-button type="danger" size="mini" @click="del(scope.row.id)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background style="text-align:center;margin:20px 0;" :current-page="cardform.page"
                    :page-sizes="pageSizes" layout="total,prev, pager, next,sizes" :total="totalNum"
                    @size-change="changeSize" @current-change="changePage"></el-pagination>
            </template>

        </el-card>
        <el-card v-else-if="cardSta === 'add'">
            <div slot="header" style="margin-bottom: 20px;">
                <el-page-header @back="back()" content="主题赏品列表"></el-page-header>
            </div>
            <el-table :data="priList" style="width: 100%;" :header-cell-style="{ color: '#333' }">
                <!-- <el-table-column prop="id" label="ID" key="7">
                </el-table-column> -->
                <el-table-column prop="name" label="卡片名称" key="8">
                </el-table-column>
                <el-table-column label="类型" key="9">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type == 1 ? '无限池' : '擂台赏' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="box_name" label="所在盲盒名称" key="15">
                    <template slot-scope="scope">
                        <el-popover placement="right" width="750" trigger="click">
                            <el-table :data="scope.row.sonList">
                                <el-table-column width="150" property="goods_id" label="商品id"></el-table-column>
                                <el-table-column width="150" property="box_name" label="盒子"></el-table-column>
                                <el-table-column width="150" property="goods_name" label="对应商品"></el-table-column>
                                <el-table-column width="150" property="name" label="对应主题文字"></el-table-column>
                                <el-table-column fixed="right" label="操作" align="center" width="150" key="10">
                                    <template slot-scope="scope">
                                        <el-button type="danger" size="mini" @click="remove(scope.row)">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-button slot="reference">查看对应盲盒</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="300" key="10">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="spList(ztkpId, scope.row)">选择盲盒/赏品
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="选择盒子/赏品" :visible.sync="seldialogFormVisible">
            <el-table :data="mhList" style="width: 100%;" :header-cell-style="{ color: '#333' }" :row-key="getRowKey"
                :expand-row-keys="expands" @expand-change="handleExpandChange">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-table :data="props.row.goods_list" style="width: 100%;" :row-style="TableRowStyle"
                            :header-cell-style="{ backgroundColor: '#f0f9eb', color: 'red' }">
                            <!-- <el-table-column type="selection" width="55" fixed></el-table-column> -->
                            <el-table-column prop="goods_id" label="ID" key="13">
                            </el-table-column>
                            <el-table-column prop="goods_name" label="赏品名称" key="14">
                            </el-table-column>
                            <el-table-column prop="level_id" label="赏品等级" key="15">
                                <template slot-scope="scope">
                                    <span>
                                        {{ scope.row.level_id == 1 ? '普通' :
                                            scope.row.level_id == 2 ? '隐藏' : scope.row.level_id == 3 ? '欧皇' : '超神' }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="价格" key="16">
                            </el-table-column>
                            <el-table-column prop="recovery_price" label="兑换价" key="17">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" align="center" width="100" key="10">
                                <template slot-scope="scope">
                                    <el-button type="primary" size="mini" @click="setSub(scope.row)">提 交
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" key="11">
                </el-table-column>
                <el-table-column prop="name" label="卡片名称" key="12">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="seldialogFormVisible = false">关 闭</el-button>
            </div>
        </el-dialog>


        <el-dialog :title="dialogTit" :visible.sync="carddialogFormVisible" width="30%">
            <el-form :model="cardform">
                <el-form-item v-if="tanchuangtype == 1" label="主题名称" :label-width="formLabelWidth">
                    <el-input v-model="cardform.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="cardform.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="image" style="padding: 0 80px;">
                    <el-button size="mini" type="primary" @click="openImage(2, false, {})">选择商品库
                    </el-button>
                    <div>
                        <el-image v-if="cardform.image" :src="cardform.image" :preview-src-list="[cardform.image]"
                            style="height: 80px" fit="contain">
                        </el-image>
                    </div>
                </el-form-item>
                <el-form-item label="主题类型" :label-width="formLabelWidth">
                    <el-select v-model="cardform.type" placeholder="请选择主题类型">
                        <el-option label="无限池" value="1"></el-option>
                        <el-option label="擂台赛" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="entercard">确 定</el-button>
            </div>
        </el-dialog>
        <SimpleImageUpload :cardStatus="cardStatus" :imageFormatArr="imageFormatArr" :imageData="imageData"
            :imageLoading="imageLoading" :uploadImageAction="uploadImageUrl" :multiple="multiple"
            @uploadImageSuccess="uploadFileSuccess" @uploadImageBefore="uploadImageBefore"
            @changeImageSize="changeImageSize" @changeImagePage="changeImagePage" @changeImageFormat="changeImageFormat"
            @choiceImageConfirm="choiceImageConfirm" @closeImage="closeImage" @getImages="getImages">
        </SimpleImageUpload>
    </div>
</template>

<script>
import api from "../../api/api.js";
import SimpleImageUpload from "@/components/SimpleImageUpload/index.vue";

export default {
    components: {
        SimpleImageUpload
    },
    data() {
        return {
            dialogTit: '',
            cardSta: 'index',//页面索引，默认主题列表
            carddialogFormVisible: false,
            seldialogFormVisible: false,
            cardform: {
                title: '',//名称
                type: '',//类型
                num: '',//数量
                image: '',
                page: 1,
                limit: 10,
            },
            cardformType: '',//搜索条件
            pageSizes: [10, 20, 50, 100, 200, 500, 800, 1000, 2000], // 每页条数默认10
            totalNum: '',//数据总条数
            totalNum1: '',//数据总条数
            formLabelWidth: '120px',
            cardtableData: [],
            typeData: [
                { id: 1, name: "无限池" },
                { id: 2, name: "擂台赏" },
            ],
            priList: [],//主题赏品列表
            mhList: [],//盲盒列表
            mhId: '',
            expands: [], // 用于存储当前展开的行的key数组
            box_name: '',//卡片添加到的盲盒name
            box_id: '',//卡片添加到的盲盒id
            goods_id: '',// 卡片添加到某个盲盒中的赏品id
            ztId: '',//主题赏品id
            ztkpId: '',//主题id
            multiple: false,
            scene: 1, // 打开组件场景
            extra: {},
            cardStatus: false,
            imageFormatArr: [
                { id: "", title: "全部" },
                { id: 1, title: "商品图片" },
                { id: 2, title: "商品详情图" },
                { id: 3, title: "banner" },
                { id: 4, title: "活动" },
                { id: 5, title: "盲盒" }
            ],
            imageParams: {
                format: "",
                page: 1
            },
            imageData: {},
            imageLoading: false,
            uploadImageUrl: "/admin/common/upload?format=5",

            mhpage: {
                type: '',
                theme_id: '',
            },
            activeValue: 1,
            inactiveValue: 2,
            kpName: '',//卡片名称
            tanchuangtype: '',
        };
    },
    created() {
        this.getIndex()
    },

    methods: {
        addcard() {
            this.dialogTit = '添加主题'

            this.tanchuangtype = 1
            this.cardform = {
                title: '',//名称
                type: '',//类型
                num: '',//数量
                image: ''
            }
            this.carddialogFormVisible = true
        },
        // 打开组件图片
        openImage(scene, multiple, extra) {
            this.multiple = multiple; // 单选还是多选
            this.scene = scene;
            this.extra = extra; // 额外数据
            this.cardStatus = true;
            this.getImages();
        },

        closeImage() {
            this.cardStatus = false;
        },
        // 查看图片
        getImages() {
            console.log('查看图片查看图片查看图片')
            this.cardStatus = true;
            this.imageLoading = true;
            api.images
                .index({ params: this.imageParams })
                .then(res => {
                    this.imageLoading = false;
                    if (res.data.code == 200) {
                        this.imageData = res.data.data;
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // 改变图片组件每页条数时
        changeImageSize(limit) {
            this.imageParams.limit = limit;
            this.getImages();
        },
        // 改变图片组件当前页码时
        changeImagePage(page) {
            this.imageParams.page = page;
            this.getImages();
        },
        // 选择类型筛选图片
        changeImageFormat(type) {
            this.initImage(type);
            this.getImages();
        },
        // 组件图片上传成功取消遮罩重新请求数据
        uploadFileSuccess(res) {
            this.unload();
            this.getImages();
            this.$message.success(res.msg);
        },
        uploadImageBefore() {
            this.load();
        },
        // 组件确定选择图片
        choiceImageConfirm(choiceImages) {
            if (this.scene == 1) {
                this.cardform.image = this.cardform.image.concat(
                    choiceImages
                );
            } else if (this.scene == 2) {
                this.cardform.image = choiceImages[0];
            } else if (this.scene == 3) {
                this.extra.row.image = choiceImages[0];
            } else if (this.scene == 4) {
                var html = "";
                choiceImages.map(item => {
                    html += `<div><img src="${item}" /></div>`;
                });
                this.setHtml(html);
                console.log("html:", html);
            }
        },
        sousuo() {
            this.getIndex()
        },
        TableRowStyle({ row, rowIndex }) {
            // 注意，这里返回的是一个对象
            let rowBackground = {};
            if (row) {
                rowBackground.background = "#f0f9eb";
                return rowBackground;
            }
        },
        // 加载中
        load() {
            this.loading = this.$loading({
                lock: true,
                text: "数据加载中",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
        },
        // 取消加载
        unload() {
            this.loading.close();
        },
        getRowKey(row) {
            // 返回每行数据的唯一标识，通常是ID
            return row.id;
        },
        handleExpandChange(row, expandedRows) {
            console.log(row, expandedRows)
            this.box_id = row.id //卡片添加到的盲盒id
            this.box_name = row.name //卡片添加到的盲盒name
            // 清空当前展开的行
            this.expands = [];
            // 如果当前有展开的行，则记录其key
            if (expandedRows.length > 0) {
                this.expands.push(row.id);
            }
        },
        del(id) {
            this.load()
            api.theme
                .deleteTheme({ id: id })
                .then(res => {
                    this.unload()
                    if (res.data.code === 200) {
                        this.$message.success(res.data.msg);
                        this.reset();
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        edit(item) {
            this.dialogTit = '修改主题'
            this.tanchuangtype = 2
            this.carddialogFormVisible = true
            console.log(item)

            this.cardform = {
                id: item.id,
                title: item.title,//名称
                type: item.type == 1 ? '无限赏' : '擂台赏',//类型
                num: item.num,//数量
                image: item.image
            }
        },
        setSub(val) {
            this.goods_id = val.goods_id// 卡片添加到某个盲盒中的赏品id
            let data = {
                theme_id: this.mhpage.theme_id,
                name: this.kpName,
                goods_id: this.goods_id,
                box_id: this.box_id
            }
            this.load()
            api.theme
                .setThemeGoods(data)
                .then(res => {
                    if (res.data.code === 200) {
                        this.unload()
                        this.prizeList(this.ztkpId)
                        this.seldialogFormVisible = false
                        this.$message.success("保存成功");
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // 重置
        reset() {
            this.cardform.type = ''
            this.cardform.title = ''
            this.getIndex()
        },
        back() {
            this.cardSta = 'index'
        },
        // 修改状态
        changeStatus(e) {
            this.load()
            api.theme
                .setThemeStatus({ id: e.id, status: e.status })
                .then(res => {
                    this.unload()
                    if (res.data.code === 200) {
                        this.$message.success("保存成功");
                        this.getData();
                        this.getIndex()
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //主题列表
        getIndex() {
            this.load()
            api.theme
                .index(this.cardform)
                .then(res => {
                    if (res.data.code === 200) {
                        this.unload()
                        this.cardtableData = res.data.data.list.data
                        this.totalNum = res.data.data.list.total
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //确认添加主题
        entercard() {
            if (this.tanchuangtype == 2) {
                this.load()
                api.theme
                    .updateTheme(this.cardform)
                    .then(res => {
                        this.unload()
                        if (res.data.code === 200) {
                            this.$message.success(res.data.msg);
                            // this.reset();
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                this.load()
                api.theme
                    .addTheme(this.cardform)
                    .then(res => {
                        if (res.data.code === 200) {
                            this.cardform.type = ''
                            this.cardform.title = ''
                            this.cardform.image = ''
                            this.unload()
                            this.getIndex()
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.carddialogFormVisible = false
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }


        },
        // 改变每页条数时
        changeSize(limit) {
            this.cardform.limit = limit;
            this.getIndex()
        },
        // 改变当前页码时
        changePage(page) {
            this.cardform.page = page;
            this.getIndex()
        },
        // 改变每页条数时
        changeSizeduage(limit) {
            this.mhpage.limit = limit;
            this.getIndex()
        },
        // 改变当前页码时
        changePageduage(page) {
            this.mhpage.page = page;
            this.getIndex()
        },
        // 主题赏品列表
        prizeList(id) {
            this.ztkpId = id
            this.load()
            api.theme
                .getList({ id: this.ztkpId })
                .then(res => {
                    if (res.data.code === 200) {
                        this.unload()
                        this.priList = res.data.data

                        this.cardSta = 'add'
                    }
                })
                .catch(error => {
                    console.log(error);
                });

        },
        // 搜索盲盒
        diageserch() {
            this.spList()
        },
        // 删除已经指定的
        remove(item) {
            this.load()
            let data = {
                theme_id: item.theme_id,
                goods_id: item.goods_id,
                box_id: item.box_id,
                type: item.type
            }
            this.load()
            api.theme
                .deleteThemeGoods(data)
                .then(res => {
                    if (res.data.code === 200) {
                        this.unload()
                        this.$message.success("删除成功");
                        this.prizeList(this.ztkpId)

                    }
                })
                .catch(error => {
                    console.log(error);
                });
            this.unload()
        },
        // 获取盲盒列表
        spList(id, item) {
            this.ztId = id
            this.mhpage.theme_id = id
            this.mhpage.type = item.type
            this.kpName = item.name
            this.load()
            api.theme
                .getBoxGoodsList(this.mhpage)
                .then(res => {
                    if (res.data.code === 200) {
                        this.unload()
                        this.mhList = res.data.data
                        this.totalNum1 = res.data.data.length
                        this.seldialogFormVisible = true
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
};
</script>

<style scoped lang="less">
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}


.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>